<template>
	<div class="app-container">
		<Tabs
			:active-value="queryParams.readStatus"
			:tabs="tabs"
			@change="changeTab"
			:isShowCount="true"></Tabs>
		<!-- <el-card class="selsctCard">
            <div class="headBox">
                <div class="headValue" :class="item.name === listValue ? 'bckColr' : ''" v-for="(item, index) in list"
                    :key="index" @click="titleCahnge(item)">
                    <span>{{ item.name }}</span>
                    <span>(</span>
                    <span>{{ item.value }}</span>
                    <span>)</span>
                </div>
            </div>
        </el-card> -->
		<div v-loading="loading">
			<SearchForm
				@reset="resetQuery"
				@search="handleQuery"
				ref="searchForm">
				<el-form-item label="消息类型:" prop="messageType">
					<el-select v-model="queryParams.messageType" clearable>
						<el-option
							:label="item.dictLabel"
							:value="item.dictSort"
							v-for="(item, index) in busFlowTypeList"
							:key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发送方式:" prop="pushType">
					<el-select
						v-model="queryParams.pushType"
						placeholder="请选择发送方式"
						clearable>
						<el-option
							v-for="item in company"
							:label="item.label"
							:value="item.value"
							:key="item.deptId"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="发送时间:" prop="sendTime">
					<el-date-picker
						type="daterange"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd"
						style="width: 100%"
						v-model="timeRange"
						@change="changeTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="消息通知:" prop="title">
					<el-input
						v-model="queryParams.title"
						clearable
						placeholder="请输入消息通知"></el-input>
				</el-form-item>
			</SearchForm>

			<div class="card-wrap card-padding">
				<div class="tableBox">
					<el-table
						fit
						:data="definitionList"
						border
						v-if="tableCloumns.length > 0">
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button
									@click="handleReadImage(scope.row)"
									type="text"
									size="small"
									v-hasPermi="['messageManagement:list:see']">
									查看
								</el-button>
							</template>
						</el-table-column>
						<TableCloumn
							v-for="item in tableCloumns"
							:cellOptions="item"></TableCloumn>
					</el-table>

					<pagination
						v-show="total > 0"
						:total="total"
						:page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize"
						@pagination="getList" />
				</div>
			</div>
		</div>
		<el-dialog
			title="查看"
			:visible.sync="open"
			append-to-body
			class="form-dialog"
			width="45%"
			:loading="loading1">
			<el-descriptions :column="1">
				<el-descriptions-item label="消息类型">
					<dict-tag
						:options="dict.type.message_type"
						:value="form.messageType" />
				</el-descriptions-item>
				<el-descriptions-item label="消息通知">
					{{ form.title }}
				</el-descriptions-item>
				<el-descriptions-item label="发送方式">
					<span v-if="form.pushType == 1">短信</span>
					<span v-if="form.pushType == 2">邮件</span>
					<span v-if="form.pushType == 3">站内信</span>
				</el-descriptions-item>
				<el-descriptions-item label="消息内容">
					<span
						:class="form.pushType == 3 ? 'routerSty' : ''"
						@click="goIfoDate(form)">
						{{ form.content }}
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="发送时间">
					{{ form.createTime }}
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
	</div>
</template>

<script>
	import * as apis from '@/api/messageManagement/index.js';
	import SearchContent from '@/components/SearchContent/index.vue';
	import Cookies from 'js-cookie';
	import TableCloumn from '@/views/finance/manage/tableColumn/index.vue';
	import Tabs from '@/components/Tabs/index.vue';
	import { set } from 'lodash';
	import { start } from 'nprogress';
	export default {
		name: 'MessageList',
		dicts: ['bus_flow_type', 'message_type'],
		components: {
			SearchContent,
			TableCloumn,
			Tabs,
		},

		data() {
			return {
				// 遮罩层
				loading: true,
				loading1: true,
				// 总条数
				total: 0,
				// 流程定义表格数据
				definitionList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					receiveId: Cookies.get('userId'),
					pushType: null,
					readStatus: 2,
					messageType: null,
					sendTime: '',
				},
				// xml
				flowData: {},
				listValue: '',
				tabs: [
					{
						label: '全部',
						value: 2,
						num: 2,
						count: 0,
					},
					{
						label: '已读',
						value: 1,
						num: 1,
						count: 0,
					},
					{
						label: '未读',
						value: 0,
						num: 0,
						count: 0,
					},
				],
				dictType: '',
				dicts: {
					claimStatusList: [
						{
							label: '未认领',
							value: '0',
						},
						{
							label: '已认领',
							value: '1',
						},
					],
				},
				tableCloumns: [
					{
						label: '消息内容',
						prop: 'content',
					},
					{
						label: '客户名称',
						prop: 'customName',
					},
					{
						label: '车牌号',
						prop: 'carNo',
					},
					{
						label: '消息通知',
						prop: 'title',
					},
					{
						label: '消息类型',
						prop: 'messageType',
						format: row => {
							if (this.notEmpty(row.messageType)) {
								if (isNaN(row.messageType * 1)) {
									return row.messageType;
								} else {
									let item =
										this.dict.type?.message_type?.find(
											e =>
												e.value ==
												row.messageType?.toString(),
										);
									if (item) {
										return item.label;
									}
								}
							} else {
								return '-';
							}
						},
					},
					{
						label: '发送方式',
						prop: 'pushType',
						format: row => {
							if (row.pushType == 1) {
								return '短信';
							} else if (row.pushType == 2) {
								return '邮件';
							} else if (row.pushType == 3) {
								return '站内信';
							}
						},
					},
					{
						label: '接收人',
						minWidth: '100px',
						prop: 'receiveName',
					},

					{
						label: '状态',
						prop: 'readStatus',
						format: row => {
							if (row.readStatus == 0) {
								return '未读';
							} else if (row.readStatus == 1) {
								return '已读';
							}
						},
					},
					{
						label: '发送时间',
						prop: 'createTime',
						minWidth: '150px',
					},
					// {
					//     label:"失败原因",
					//     prop:"failLog",
					// }
				],
				company: [
					{ label: '短信', value: 1 },
					{ label: '邮件', value: 2 },
					{ label: '站内信', value: 3 },
				], //公司
				open: false, // 弹框状态
				form: {
					title: '',
					pushType: '',
					content: '',
					sendTime: '',
					messageType: '',
				},
				busFlowTypeList: [],
				time: null,
				timeRange: [],
			};
		},
		async created() {
			this.loading = true;
			this.getList();

			this.busFlowTypeList = await this._getDicts('message_type');
		},
		activated() {
			this.getList();
		},
		mounted() {
			this.time = setInterval(() => {
				this.getList();
			}, 60000);
		},
		methods: {
			// 发送时间发生改变
			changeTime(val) {
				this.queryParams.startTime = val[0];
				this.queryParams.endTime = val[1];
			},
			// 跳转详情
			goIfoDate(info) {
				if (info.pushType == 3) {
					this.open = false;
					this.loading1 = true;
					const data = {
						id: info.id,
						messageCode: info.messageCode,
					};
					apis.messageRouterGet(data).then(res => {
						if (res.code == 200) {
							if (res?.data) {
								this.loading1 = false;
								this.$router.push({
									name: res?.data?.path,
									query: res?.data?.query,
								});
							} else {
								this.$message(res?.msg);
							}
						}
					});
				}
			},
			changeTab(id) {
				this.queryParams.readStatus = id;
				this.queryParams.businessType = '';
				this.queryParams.pageNum = 1;
				this.queryParams.pageSize = 10;
				this.$refs.searchForm.resize();
				this.getList();
			},
			// 按钮切换
			titleCahnge({ name, dictValue, id }) {
				this.listValue = name;
				this.queryParams.businessType = '';
				this.queryParams.pageNum = 1;
				this.queryParams.pageSize = 10;
				this.queryParams.readStatus = id == 2 ? '' : id;
				this.$refs.searchForm.resize();
				this.queryParams.category = dictValue;
				this.getList();
			},

			/** 查询列表 */
			getList() {
				let that_ = this;
				let info = JSON.parse(JSON.stringify(that_.queryParams));
				info.readStatus =
					that_.queryParams.readStatus == 2
						? ''
						: that_.queryParams.readStatus;
				info.status = '';
				apis?.messageList(info)
					.then(response => {
						if (response.code == 200) {
							that_.definitionList = response.rows;
							// that_.busFlowTypeList.map((res)=>{
							//     that_.definitionList.map((item)=>{
							//         if(res.dictValue==item.messageType){
							//             that_.$set(item,'messageType',res.dictLabel)
							//         }
							//     })
							// })
							that_.total = response.total;
						} else {
							clearInterval(that_.time);
						}
					})
					.finally(() => {
						clearInterval(that_.time);
						that_.loading = false;
					});
				apis?.messageCount().then(res => {
					if (res.code == 200) {
						this.tabs.map(item => {
							res?.data.map(info => {
								if (item.value == info.readStatus) {
									item.count = info.count;
								}
							});
						});
						const num1 = res?.data[0]?.count
							? res?.data[0]?.count
							: 0;
						const num2 = res?.data[1]?.count
							? res?.data[1]?.count
							: 0;
						this.tabs[0].count = num1 + num2;
					}
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					receiveId: Cookies.get('userId'),
					category: null,
					businessType: '',
					businessId: null,
				};
				this.$set(this.queryParams, 'readStatus', 2);
				this.listValue = '';
				(this.timeRange = []), this.handleQuery();
			},

			/** 消息查看 */
			handleReadImage(info) {
				this.form = {
					title: '',
					pushType: '',
					content: '',
					sendTime: '',
				};
				this.open = true;
				apis.messageListDetail(info.id).then(res => {
					if (res.code == 200) {
						this.form = res.data;
					}
				});
				// 点击查看后就变成已读
				apis.messageUpdate({ id: info.id, readStatus: 1 }).then(res => {
					if (res.code == 200) {
						this.getList();
					}
				});
			},
			// goInfoValue(){
			//     this.$message('该消息工单已被其他人处理');
			// }
		},
		destroyed() {
			if (this.time) {
				clearInterval(this.time);
			}
		},
	};
</script>
<style scoped lang="scss">
	.selsctCard {
		margin-bottom: 20px;
		border-radius: 8px;

		.headBox {
			width: 100%;
			min-height: 30px;
			// height: 30px;
			line-height: 30px;
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
			// justify-content: space-between;

			.headValue {
				// width: 15%;
				padding: 0 13px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 14px;
				border: 1px solid #ccc;
				border-radius: 5px;
				cursor: pointer;
			}

			.bckColr {
				color: #fff;
				background: #1890ff;
			}
		}
	}
	.routerSty {
		color: #1890ff;
		cursor: pointer;
	}
</style>
